<template>
  <div>
       <div class="search_con">
        <div class="iconfont icon-fanhui" @click="prev"></div>
        <div class="header-inp">
          <div class="iconfont icon-sousuo"></div>
          <router-link to="/search">
          <input type="text" placeholder="晚餐" @input="add" :value="text">
          </router-link>
        </div>
        <div class="header-Icon">
          <span>搜索</span>
        </div>
      </div>

      <!-- 历史搜索 -->
      <div class="history">
      </div>

      <!-- 热门搜索 -->
      <div class="hot_search" v-if="!text">
          <h4>热门搜索</h4>
        <ul>
            <li v-for="(item,index) in searchs" :key="index"  @click="lit(index)" :style="{border:1 + 'px  solid' + item.borderColor,backgroundColor:item.background_color,color:item.color}" v-show="index < 20">
               
              {{item.title}}
                </li>
        </ul>
      </div>

      <!-- 搜索结果 -->
      <div class="result" v-else>
        <ul>
          <li v-for="(item,index) in results" :key="index">
             <router-link tag="div" :to="'/result?name='+item.name" class="lis">
            <p>{{item.name}}</p>
            <span v-if="item.tag" :style="{border:1 + 'px  solid' + item.tag.border_color,backgroundColor:item.tag.background_color,color:item.tag.text_color}">{{item.tag.name}}</span>
             </router-link>
          </li>
         
        </ul>
      </div>


  </div>
</template>

<script>
import {getRecipeSearch,getRecipeSearchSuggests} from "../../api/search.js"
export default {
    data(){
        return{
            searchs:[],
            text:"",
            results:[]
        }
    },
    methods:{
      prev(){
        this.$router.go(-1)
      },
      add(event){
        console.log(event);
        this.text = event.data
        getRecipeSearchSuggests({kw:this.text}).then(data=>{
          this.results = data.result.suggests;
        })
      },
      lit(index){
        this.text = this.searchs[index].title
      }
    },
    created(){
        getRecipeSearch().then(data=>{
            this.searchs = data.result.suggestdetails
        }) 
    }
}
</script>

<style lang="less">
.search_con{
      display: flex;
      align-items: center;
      margin-top: 30px;
      .iconfont{
        margin-left: 20px;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        color: #151515;
        font-size: 12px;
        line-height: 22px;
        text-align: center;
        font-weight: bold;
      }
      .header-inp{
        position: relative;
        margin-left: 23px;
        display: flex;
        width: 61%;
        height: 30px;
        .iconfont{
          width: 16px;
          height: 16px;
          position: absolute;
          left: 10px;
          top:0px;
          bottom: 4px;
          margin: auto;
          color: #A1A1A1;
        }
        input{
          width: 100%;
          height: 100%;
          border:transparent;
           outline: none;
          background-color: #F5F5F5;
          border-radius: 5px;
          font-size: 12px;
          line-height: 30px;
          padding-left: 35px;
          color: #A1A1A1;
          &::-webkit-input-placeholder{
             color: #A1A1A1;
            }
        }
    }
     .header-Icon{
        span{
          display: block;
          margin-left: 22px;
          font-size: 12px;
          color: black;
         
        }
      }
}
.hot_search{
    margin:18px 20px;
    h4{
        font-size: 14px;
        line-height: 14px;
        color: #1C1C1C;
    }
    ul{
        display: flex;
        flex-wrap: wrap;
        margin-top: 16px;
        li{
            padding:0px 12px;
            font-size: 12px;
            line-height: 24px;
            margin-right: 8px;
            margin-bottom: 10px;
            background-color: #FAFAFA;
            border-radius: 3px;
            border: 1px;
        }
    }
}

.result{
  margin:10px 16px;
  ul{
    display: flex;
    flex-direction: column;
    .lis{
      display: flex;
      justify-content: space-between;
      align-items: center;
      p{
        font-size: 14px;
        line-height: 40px;
        color: #0B0B0B;
        border-bottom: 2px solid #F7F7F7;
      }
      span{
        display: inline-block;
        padding:0px 8px;
        line-height: 18px;
        font-size: 11px;
        border: 2px solid #FAE281;
        border-radius: 17px;
      }
    }
  }
}
</style>